<script setup lang="ts">
import {ref} from "vue";
import {getFb} from "@/api/more";

let list = ref()
getFb().then(res=>{
    // console.log(res)
    if(res.code== 200){
        list.value = res.rows.map(item =>{
            item.mainPic = 'http://192.168.5.120:8199' + item.mainPic
            return item
        })
    }
})
</script>

<template>
    <div >
        <div id="banner"></div>
        <div id="main">
            <div class="one" v-for="item in list" :key="item.contactUserId">
                <img :src="item.mainPic" alt="">
                <p>{{item.title}}</p>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
#banner{
  width: 375px;
  height: 160px;
  background-image: url("@/assets/images/0bc5f9e6c4b9fc5a1ec0e4a18671f2c.png");
  background-repeat: no-repeat;
    background-size: 375px 160px;
}
#main{
    width: 350px;
    margin: auto;
    margin-top: -70px;
    //background-color: #181818;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;


    .one{
        width: 120.5pt;
        height: 95.5pt;
        margin-bottom: 10px;
        //background-color: #c81127;

        img{
            width: 100%;
            height: 80pt;
        }
        p{
            //margin-top: -8px;
            height: 15.5px;
            line-height: 7pt;
            font-size: 12px;
        }
    }
}
</style>